<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gentelella Alela! | </title>

    <!-- Bootstrap -->
    <link href="../vendors/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet">

    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">

    <link href="../vendors/select2/dist/css/select2.css" rel="stylesheet">
    <!-- number spinner-->
    <link herf="../build/css/spinner.css" rel="stylesheet">

    <link href="../vendors/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="../build/css/custom.min.css" rel="stylesheet">
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
            </div>

            <div class="clearfix"></div>

            <!-- menu profile quick info -->
            <div class="profile clearfix">
              <div class="profile_pic">
                <img src="../images/img.jpg" alt="..." class="img-circle profile_img">
              </div>
              <div class="profile_info">
                <span>Welcome,</span>
                <h2>John Doe</h2>
              </div>
            </div>
            <!-- /menu profile quick info -->

            <br />

            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
              <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="index.html">Dashboard</a></li>
                      <li><a href="index2.html">Dashboard2</a></li>
                      <li><a href="index3.html">Dashboard3</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="form.html">General Form</a></li>
                      <li><a href="form_advanced.html">Advanced Components</a></li>
                      <li><a href="form_validation.html">Form Validation</a></li>
                      <li><a href="form_wizards.html">Form Wizard</a></li>
                      <li><a href="form_upload.html">Form Upload</a></li>
                      <li><a href="form_buttons.html">Form Buttons</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="general_elements.html">General Elements</a></li>
                      <li><a href="media_gallery.html">Media Gallery</a></li>
                      <li><a href="typography.html">Typography</a></li>
                      <li><a href="icons.html">Icons</a></li>
                      <li><a href="glyphicons.html">Glyphicons</a></li>
                      <li><a href="widgets.html">Widgets</a></li>
                      <li><a href="invoice.html">Invoice</a></li>
                      <li><a href="inbox.html">Inbox</a></li>
                      <li><a href="calendar.html">Calendar</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="tables.html">Tables</a></li>
                      <li><a href="tables_dynamic.html">Table Dynamic</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="chartjs.html">Chart JS</a></li>
                      <li><a href="chartjs2.html">Chart JS2</a></li>
                      <li><a href="morisjs.html">Moris JS</a></li>
                      <li><a href="echarts.html">ECharts</a></li>
                      <li><a href="other_charts.html">Other Charts</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
                      <li><a href="fixed_footer.html">Fixed Footer</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="e_commerce.html">E-commerce</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="project_detail.html">Project Detail</a></li>
                      <li><a href="contacts.html">Contacts</a></li>
                      <li><a href="profile.html">Profile</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="page_403.html">403 Error</a></li>
                      <li><a href="page_404.html">404 Error</a></li>
                      <li><a href="page_500.html">500 Error</a></li>
                      <li><a href="plain_page.html">Plain Page</a></li>
                      <li><a href="login.html">Login Page</a></li>
                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#level1_1">Level One</a>
                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
                          <ul class="nav child_menu">
                            <li class="sub_menu"><a href="level2.html">Level Two</a>
                            </li>
                            <li><a href="#level2_1">Level Two</a>
                            </li>
                            <li><a href="#level2_2">Level Two</a>
                            </li>
                          </ul>
                        </li>
                        <li><a href="#level1_2">Level One</a>
                        </li>
                    </ul>
                  </li>                  
                  <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
                </ul>
              </div>

            </div>
            <!-- /sidebar menu -->

            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
              <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
              </a>
            </div>
            <!-- /menu footer buttons -->
          </div>
        </div>

        <!-- top navigation -->
        <div class="top_nav">
          <div class="nav_menu">
            <nav>
              <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
              </div>

              <ul class="nav navbar-nav navbar-right">
                <li class="">
                  <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <img src="../images/img.jpg" alt="">John Doe
                    <span class=" fa fa-angle-down"></span>
                  </a>
                  <ul class="dropdown-menu dropdown-usermenu pull-right">
                    <li><a href="javascript:;"> Profile</a></li>
                    <li>
                      <a href="javascript:;">
                        <span class="badge bg-red pull-right">50%</span>
                        <span>Settings</span>
                      </a>
                    </li>
                    <li><a href="javascript:;">Help</a></li>
                    <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
                  </ul>
                </li>

                <li role="presentation" class="dropdown">
                  <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge bg-green">6</span>
                  </a>
                  <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
                    <li>
                      <a>
                        <span class="image"><img src="../images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="image"><img src="../images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="image"><img src="../images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="image"><img src="../images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <div class="text-center">
                        <a>
                          <strong>See All Alerts</strong>
                          <i class="fa fa-angle-right"></i>
                        </a>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Form Wizards</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                              <button class="btn btn-default" type="button">Go!</button>
                          </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Form Wizards <small>Sessions</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <!-- Smart Wizard -->
                    <p>This is a basic form wizard example that inherits the colors from the selected scheme.</p>
                    <div id="wizard" class="form_wizard wizard_horizontal">
                      <ul class="wizard_steps">
                        <li>
                          <a href="#step-1">
                            <span class="step_no">1</span>
                            <span class="step_descr">
                                              Step 1<br />
                                              <small>Step 1 Deployment 信息描述</small>
                                          </span>
                          </a>
                        </li>
                        <li>
                          <a href="#step-2">
                            <span class="step_no">2</span>
                            <span class="step_descr">
                                              Step 2<br />
                                              <small>Step 2 description</small>
                                          </span>
                          </a>
                        </li>
                        <li>
                          <a id="setptrack" href="#step-3">
                            <span class="step_no">3</span>
                            <span class="step_descr">
                                              Step 3<br />
                                              <small>Step 3 description</small>
                                          </span>
                          </a>
                        </li>
                        <li>
                          <a href="#step-4">
                            <span class="step_no">4</span>
                            <span class="step_descr">
                                              Step 4<br />
                                              <small>Step 4 description</small>
                                          </span>
                          </a>
                        </li>
                      </ul>
                      <div id="step-1">
                        <form class="form-horizontal form-label-left">

                          <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> 名称 <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                              <input type="text" id="first-name" required="required" class="form-control col-md-7 col-xs-12">
                            </div>
                          </div>
                          <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12"> 标签 <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                              <!--<input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12">-->
                              <select id="label-select" class="col-md-6 col-sm-6 col-xs-6" multiple="multiple" name="label-select">
                              </select>
                              <!--<div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div>-->
                            </div>
                          </div>

                          <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-3"> 复制数量 <span class="required">*</span></label>
                            <div class="col-md-1 col-xs-1">
                              <input type="number" id="number" name="number" required="required" data-validate-minmax="1,100" class="form-control col-md-3 col-xs-3">
                            </div>
                          </div>


                          <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">命名空间<span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                              <select class="col-md-6 col-sm-6 col-xs-12"  id="ns-select" name="namespace_id">
                                <option>请选命名空间</option>
                                <option  th:each="list:${nslist}" th:value="${list.id}" th:text="${list.spacename}"></option>
                              </select>
                            </div>
                          </div>

                            <div class="form-group">
                              <label class="control-label col-md-3 col-sm-3 col-xs-12">容器镜像<span class="required">*</span>
                              </label>
                              <div class="col-md-9 col-sm-9 col-xs-12">
                                <select class="col-md-6 col-sm-6 col-xs-6" multiple="multiple" id="docker-image-select" name="imageids">
                                </select>
                              </div>
                            </div>
                        </form>
                      </div>


                      <div id="step-2">
                        <h2 class="StepTitle">Step 2 Content</h2>
                          </div>



                     <div id="step-3">
                        <h2 class="StepTitle">Step 3 Content</h2>
                       <div class="x_content">
                         <!-- Split button -->
                         <div class="btn-group">
                           <button type="button" class="btn btn-danger" id="btn_svc">添加服务</button>
                           <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                             <span class="caret"></span>
                             <span class="sr-only">Toggle Dropdown</span>
                           </button>
                           <ul class="dropdown-menu" role="menu">
                             <li><a href="#" onclick="empty_container()">清空</a>
                             </li>
                           </ul>
                         </div>

                         <div class="row">&nbsp&nbsp</div>

                       <div class="container" id="container">
                         <!--<div class="row">-->
                           <!--<div class="col-sm-6">-->
                             <!--<div class="col-sm-4">-->
                               <!--<select id="svc" name="svc">-->
                                 <!--<option>选择协议</option>-->
                                 <!--<option>TCP</option>-->
                                 <!--<option>UDP</option>-->
                                 <!--<option>TCP/UDP</option>-->
                               <!--</select>-->
                             <!--</div>-->

                             <!--<div class="col-sm-4">-->
                               <!--<div class="form-group">-->
                                 <!--<div class="input-group date" id="myDatepicker2">-->
                                   <!--<input type="text" class="form-control">-->
                                   <!--<span class="input-group-addon">-->
                               <!--<span class="glyphicon glyphicon-calendar"></span>-->
                            <!--</span>-->
                                 <!--</div>-->
                               <!--</div>-->
                             <!--</div>-->

                             <!--<div class="col-sm-4">-->
                               <!--<div class="form-group">-->
                                 <!--<div class="input-group date" id="myDatepicker3">-->
                                   <!--<input type="text" class="form-control">-->
                                   <!--<span class="input-group-addon">-->
                               <!--<span class="glyphicon glyphicon-calendar"></span>-->
                            <!--</span>-->
                                 <!--</div>-->
                               <!--</div>-->
                             <!--</div>-->
                           <!--</div>-->
                           <!--<div class="col-sm-6">&nbsp;</div>-->
                         </div>
                      </div>
                     </div>

                      <div id="step-4">
                        <h2 class="StepTitle">Step 4 Content</h2>
                        <table id="tb_desc"></table>
                      </div>
                    <!-- End SmartWizard Content -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="pull-right">
            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>
      </div>
    </div>
    <!-- jQuery -->
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="../vendors/nprogress/nprogress.js"></script>
    <!-- jQuery Smart Wizard -->
    <script src="../vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="../build/js/custom.js"></script>
    <script src="../build/js/spinner.js"></script>
    <!-- jQuery Tags Input -->
    <script src="../vendors/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>

    <script src="../vendors/select2/dist/js/select2.js"></script>

    <script src="../vendors/bootstrap-table/dist/bootstrap-table.js"></script>
    <script src="../vendors/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

    <script type="text/javascript">

        $("#label-select").select2({
        placeholder: "请选择标签",
            language: "zh-CN",
            allowClear: true,
            ajax: {
                dataType: 'json',
                url: "http://localhost:8080/label/list?page=1&size=10" ,
                maximumSelectionLength :10 ,
                data: function (params) {
                    return{
                        page: params.page || 1,
                        labelkey: params.term,
                        size : 10
                    };
                },
                processResults : function(data) {
                    return {
                        results : data,// 后台返回的数据集
                        // pagination : {
                        //     more : params.page < data.total// 总页数为10，那么1-9页的时候都可以下拉刷新
                        // }
                    };
                },
                cache: false
            }
        });

        $("#ns-select").select2({
            placeholder: "请选择环境",
            language: "zh-CN",
            allowClear: true,
        });

        $("#docker-image-select").select2({
            placeholder: "请选择容器镜像",
            language: "zh-CN",
            allowClear: true,
        });

    </script>

    <script type="text/javascript">
          $("#docker-image-select").empty()
          $("#ns-select").change(function () {
              var nsparam = $(this).children('option:selected').text();
              $("#docker-image-select").select2({
                  placeholder: "请选择容器镜像",
                  language: "zh-CN",
                  ajax: {
                      dataType: 'json',
                      url: "/registry/list?namespace=" + nsparam ,
                      maximumSelectionLength :10 ,
                      processResults: function (data) {
                          return {
                              results: data
                          };
                      }
                  }
              });
          });
          var docker_list = []
              $("#docker-image-select").change(function() {
                  $("#step-2").empty();
                  docker_list .splice(0,docker_list.length)
                   var str2value = $("#docker-image-select").select2("data");
                  var selectenv = $("#ns-select").select2("data");
                   str2value.forEach(function (index, val) {
                          // console.log(index, val , this);
                          $("#step-2").append(  " <div id=\"dynamic_pannel\" class=\"col-md-6 col-xs-12\">" +
                              "                          <div id=container_" + index["name"] + " class=\"x_panel\">" +
                              "                            <div class=\"x_title\">" +
                              "                              <h2>容器名称：" + index["name"] + "<small>镜像地址:"  + index["path"] + "</h2>" +
                              "                              <ul class=\"nav navbar-right panel_toolbox\">" +
                              "                                <li><a class=\"collapse-link\"><i class=\"fa fa-chevron-up\"></i></a>" +
                              "                                </li>" +
                              "                                <li class=\"dropdown\">" +
                              "                                  <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-expanded=\"false\"><i class=\"fa fa-wrench\"></i></a>" +
                              "                                  <ul class=\"dropdown-menu\" role=\"menu\">" +
                              "                                    <li><a href=\"#\">Settings 1</a>" +
                              "                                    </li>" +
                              "                                    <li><a href=\"#\">Settings 2</a>" +
                              "                                    </li>" +
                              "                                  </ul>" +
                              "                                </li>" +
                              "                                <li><a class=\"close-link\"><i class=\"fa fa-close\"></i></a>" +
                              "                                </li>" +
                              "                              </ul>" +
                              "                              <div class=\"clearfix\"></div>" +
                              "                            </div>" +
                              "                            <div class=\"x_content\">" +
                              "                              <br>" +
                              "                              <form class=\"form-horizontal form-label-left input_mask\">" +
                              "                                <div class=\"col-md-6 col-sm-6 col-xs-12 form-group has-feedback\">" +
                              "                                  <input type=\"text\" class=\"form-control has-feedback-left\" id=\"inputSuccess1\" placeholder=\"CPU配额\">" +
                              "                                  <span class=\"fa fa-cloud form-control-feedback left\" aria-hidden=\"true\"></span>" +
                              "                                </div>"+
                              "                                <div class=\"col-md-6 col-sm-6 col-xs-12 form-group has-feedback\">" +
                              "                                  <input type=\"text\" class=\"form-control\" id=\"inputSuccess2\" placeholder=\"CPU限制\">" +
                              "                                  <span class=\"fa fa-cloud form-control-feedback right\" aria-hidden=\"true\"></span>" +
                              "                                </div>" +
                              "                                <div class=\"col-md-6 col-sm-6 col-xs-12 form-group has-feedback\">" +
                              "                                  <input type=\"text\" class=\"form-control has-feedback-left\" id=\"inputSuccess3\" placeholder=\"内存配额\">" +
                              "                                  <span class=\"fa fa-wrench form-control-feedback left\" aria-hidden=\"true\"></span>" +
                              "                                </div>" +
                              "                                <div class=\"col-md-6 col-sm-6 col-xs-12 form-group has-feedback\">" +
                              "                                  <input type=\"text\" class=\"form-control\" id=\"inputSuccess4\" placeholder=\"内存限制\">" +
                              "                                  <span class=\"fa fa-wrench form-control-feedback right\" aria-hidden=\"true\"></span>" +
                              "                                </div>"+
                              "                                <div class=\"form-group\">" +
                              "                                  <label class=\"control-label col-md-3 col-sm-3 col-xs-3\">Tag版本</label>" +
                              "                             <div class=\"col-md-6 col-sm-6 col-xs-6\">" +
                              "                                  <select class=\"form-control\" +  id=\"tag-select-" + index["name"] + "\"" + "name=\"tag_id\">"+
                              "                                  </select>" +
                              "                                  </div>" +
                              "                             <div class=\"col-md-3 col-sm-3 col-xs-3\">" +
                              "                                  <input type=\"text\" class=\"form-control\" id=\"inputSuccess5\" placeholder=\"启动端口\">" +
                              "                                  <span class=\"fa fa-wrench form-control-feedback right\" aria-hidden=\"true\"></span>" +
                              "                                </div>"+
                              "                                </div>" +
                              "                                </div>" +
                              "                              </form>" +
                              "                            </div>" +
                              "                          </div>" +
                           '<script> $("#tag-select-' + index["name"] + '\").select2({' +
                           'language: "zh-CN",'+
                           'placeholder: "选择合适的Tag",' +
                           'allowClear: "true",' +
                           'width: "100%",'+
                           'ajax: { '+
                           '   dataType: "json",'+
                           '   url: "/registry/tag/' + index["namespace"] + '/' + index["name"] + '",' +
                           '   processResults: function (data) { '+
                           'return { results: data }}}})<\/script>'
                          )
                       docker_list.push(
                           {docker_name: index["name"],
                           }
                       )
                      });
                  });
    </script>

    <script>
         var html = "<div class=\"row\">\n" +
             "                         <div class=\"col-sm-6\" id=\"svc_options\">\n" +
             "                             <div class=\"col-sm-4\">\n" +
             "                               <select id=\"svc_select\" name=\"svc\">\n" +
             "                                 <option>选择协议</option>\n" +
             "                                 <option>TCP</option>\n" +
             "                                 <option>UDP</option>\n" +
             "                                 <option>TCP/UDP</option>\n" +
             "                               </select>\n" +
             "                           </div>\n" +
             "                           <div class=\"col-sm-4\">\n" +
             "                             <div class=\"form-group\">\n" +
             "                               <div class=\"input-group date\" >\n" +
             "                                 <input type=\"text\" id=\"src_port\" class=\"form-control\">\n" +
             "                                 <span class=\"input-group-addon\">\n" +
             "                               <span class=\"glyphicon glyphicon-calendar\"></span>\n" +
             "                            </span>\n" +
             "                               </div>\n" +
             "                             </div>\n" +
             "                           </div>\n" +
             "                           <div class=\"col-sm-4\">\n" +
             "                             <div class=\"form-group\">\n" +
             "                               <div class=\"input-group date\" >\n" +
             "                                 <input type=\"text\" id=\"dst_port\" class=\"form-control\">\n" +
             "                                 <span class=\"input-group-addon\">\n" +
             "                               <span class=\"glyphicon glyphicon-calendar\"></span>\n" +
             "                            </span>\n" +
             "                               </div>\n" +
             "                             </div>\n" +
             "                           </div>\n" +
             "                       </div>\n" +
             "                           <div class=\"col-sm-6\">&nbsp;</div>\n" +
             "                    </div>      " +
             "<script type=\"application/javascript\">\n" +
             "    $(\"select#svc_select\").select2({\n" +
             "    placeholder: \"请选择服务协议\",\n" +
             "    width: \"100%\",\n" +
             "    language: \"zh-CN\",\n" +
             "    allowClear: true,\n" +
             "    });\n" +
             "<\/script>"
        $("#btn_svc").click(function () {
            $("#container").append(html);
        })

        function empty_container() {
            $("#container").empty()
        }

    </script>


    <script>
        $("#tb_desc").bootstrapTable({
            url: '../ns/list',
            method: 'get',
            toolbar: '#toolbar', //工具按钮用哪个容器
            sortName : 'id',
            silentSort: true,
            dataType: "json",
            striped: true,//设置为 true 会有隔行变色效果
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //分页
            showColumns: "true",//是否显示 内容列下拉框
            pageNumber: 1,//如果设置了分页，首页页码
            pageSize: 10,//如果设置了分页，页面数据条数
            pageList: ['All',10, 25, 50, 100],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            singleSelect: false,//设置True 将禁止多选
            search: true,
            clickToSelect: true,
            data_local: "zh-US",//表格汉化
            sidePagination: "server", //服务端处理分页
            showHeader : true,
            showRefresh : true,
            queryParamsType: "",
            queryParams: queryParams,
            onLoadSuccess: onLoadSuccess,
            idField: "id",//指定主键列

            columns: [
                {
                    checkbox: true
                },
                {
                    title: 'ID编号',//表的列名
                    field: 'id',//json数据中rows数组中的属性名
                    align: 'center',//水平居中
                    sortable : true
                },
                {
                    title: '空间名称',
                    field: 'spacename',
                    align: 'center',
                    sortable : true
                },
                {
                    title: '操作',
                    field: 'operate',
                    align: 'center',
                    formatter: function (value, row, index) {//自定义显示可以写标签哦~
                        return '<a href="#" mce_href="#" onclick="edit(\'' + row.userId + '\')">操作</a> ';
                    }
                }],
        });

        function queryParams(params) {  //配置参数
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                size: params.pageSize,//页面大小
                page: params.pageNumber,//页码
                //search: params.searchText, //搜索
                orderBy: params.sortName,
                sortOrder: params.sortOrder,
            };
            return temp;
        }

        /**
         * 合并单元格
         * @param data  原始数据（在服务端完成排序）
         * @param fieldName 合并属性名称
         * @param colspan   合并列
         * @param target    目标表格对象
         */
        function mergeCells(data,fieldName,colspan,target){
            //声明一个map计算相同属性值在data对象出现的次数和
            var sortMap = {};
            for(var i = 0 ; i < data.length ; i++){
                for(var prop in data[i]){
                    if(prop == fieldName){
                        var key = data[i][prop]
                        if(sortMap.hasOwnProperty(key)){
                            sortMap[key] = sortMap[key] * 1 + 1;
                        } else {
                            sortMap[key] = 1;
                        }
                        break;
                    }
                }
            }
            for(var prop in sortMap){
                console.log(prop,sortMap[prop])
            }
            var index = 0;
            for(var prop in sortMap){
                var count = sortMap[prop] * 1;
                $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
                index += count;
            }
        }
        function onLoadSuccess(data){
            console.log(data);
            var data = $("#tb_desc").bootstrapTable('getData', true);
            mergeCells(data, "spacename", 1, $("#tb_desc"));
            //resetWidth
        }

    </script>



    </body>
</html>